<template>
    <div>
    <h3>你好啊 我是第三个demo</h3>
    <p>
        我叫{{obj.name}},今年{{obj.age}}岁,我家住在{{obj.address}}
    </p>
    <button @click="changePerson">
        单独改变
    </button>
    <button @click="changeAll">
        全部改变
    </button>
    </div>
</template>

<script setup lang='ts' name='Demo3'>
    // 定义引用数据类型
    import {reactive} from 'vue';
    let obj = reactive({
        name:"图图",
        age: 3,
        address: '翻斗花园'
    })
    console.log(obj,'obj')
    function changePerson() {
        obj.name ='孙悟空';
    }
    function changeAll() {
        // obj = {name:'哆啦A梦',age: 7,address:"大雄家"}
        Object.assign(obj, {name:'哆啦A梦',age: 7,address:"大雄家"})
    }
</script>

<style>

</style>